;
(function() {
	let hlInfiniteTree = {
		template: `
			<div class="hl-infinite-tree">
				<div class="hl-tree-hover border-b relative">
					<div @click="toggle($event)" v-if="!data.isSelect" :style="{width: width + 'px'}" class="hl-infinite--name">
						<span :style="{marginLeft: pleft, display:'block'}">{{ data.name }}</span>
					</div>
					<input type="text" autofocus="autofocus" :style="{width: width + 'px'}" class="global_ipt_text ipt-only" v-if="data.isSelect" v-model="data.name" autocomplete="off"/>
					<div class="hl-tree-operate color-gray hide" v-if="isOperate">
						<div v-if="!data.editFlag">
							<span class="icon-Nav-home-pendingcontract cursor mr-5 " @click="editInfo"></span>
							<span class="icon-Gm-add cursor relative mr-5" :class="{'samelevel-event-hover': samelevel}" @click="add">
								<ul class="hl-tree-add-list" v-if="samelevel">
									<li @click.stop.prevent="addSameLevel">{{ equalName }}</li>
									<li @click.stop.prevent="addLower">{{ lowerName }}</li>
								</ul>
							</span>
							<span class="icon-Gm-close cursor" @click="delNodeCurrent"></span>
						</div>
					</div>
					<div class="hl-tree-operate color-gray" v-if="data.editFlag">
						<span class="icon-Gm-confirm cursor mr-5" @click="query"></span>
						<span class="icon-Gm-cancel cursor mr-5" @click="cancelEdit"></span>
					</div>
				</div>
				<div v-show="open" v-if="hasChild" class="hl-children-tree">
					<hl-infinite-tree
					v-for="(item, index) in data.children"
					:data="item"
					:key="index"
					:list="list"
					:level-pl="levelPl"
					:is-operate="isOperate"
					:padding-left="paddingLeft"
					:samelevel="samelevel"
					:equal-name="equalName"
					:lower-name="lowerName"
					:tips="tips"
					@on-edit-click="editClick"
					@on-add-click="addClick"
					@on-del-click="delClick"
					@on-select-click="selectClick"
					></hl-infinite-tree>
				</div>
			</div>
		`,
		props: {
			data: {
				type: [Object, Array],
				required: true
			},
			isOperate: {
				type: Boolean,
				default: false
			},
			levelPl: {
				type: [Number, String],
				default: 4
			},
			paddingLeft: {
				type: [Number, String],
				default: 14
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			tips: {
				type: String,
				default: '请先保存当前信息'
			},
			width: {
				type: [Number, String],
				default: 120
			},
			samelevel: {
				type: Boolean,
				default: false
			},
			equalName: {
				type: String,
				default: '同级'
			},
			lowerName: {
				type: String,
				default: '下级'
			},
		},
		data() {
			return {
				open: false,
				pleft: '0px'
			}
		},
		computed: {
			hasChild() {
				return this.data.children && this.data.children.length
			}
		},
		// watch: {
		// 	list (val) {
		// 		if (!val[val.length-1]['name'] && !val[val.length-1]['isSelect'] && !val[val.length-1]['editFlag']) {
		// 			val[val.length-1]['isSelect'] = true
		// 			val[val.length-1]['editFlag'] = true
		// 		}
		// 	}
		// },
		methods: {
			editClick (obj) {
				this.$emit('on-edit-click', obj)
			},
			addClick (obj) {
				this.$emit('on-add-click', obj)
			},
			delClick (obj) {
				this.$emit('on-del-click', obj)
			},
			selectClick (obj) {
				this.$emit('on-select-click', obj)
			},
			toggle(e) {
				if (document.querySelector('.ipt-only')) {
					hl.toast(this.tips)
					return
				}
				if (this.hasChild) {
					this.open = !this.open
				}
				document.querySelectorAll('.hl-infinite--name').forEach((item, index) => {
					item.classList.remove('active')
				})
				e.target.parentElement.classList.add('active')
				this.$emit('on-select-click', {data: this.data, parentData: this.$parent.data})
			},
			//计算层级距离
			computedPleft() {
				var num = getParentTag(this.$el, 'hl-children-tree').length;
				if (num > Number(this.levelPl)) {
					num = Number(this.levelPl)
				}
				this.pleft = num * Number(this.paddingLeft) + "px";
			},
			//删除节点
			nodeDelete() {
				if (Array.isArray(this.$parent.data)) {
					for (let i = 0; i < this.$parent.data.length; i++) {
						let item = this.$parent.data[i];
						if (JSON.stringify(item) == JSON.stringify(this.data)) {
							this.$parent.data.splice(i, 1)
						}
					}
				} else {
					for (let i = 0; i < this.$parent.data.children.length; i++) {
						let item = this.$parent.data.children[i];
						if (JSON.stringify(item) == JSON.stringify(this.data)) {
							this.$parent.data.children.splice(i, 1)
						}
					}
				}

			},
			// 删除当前节点
			delNodeCurrent () {
				this.$emit('on-del-click', {data: this.data, parentData: this.$parent.data, del: this.nodeDelete})
			},
			//编辑当前
			editInfo() {
				if (document.querySelector('.ipt-only')) {
					hl.toast(this.tips)
					return
				}
				if (!this.data.isSelect) {
					this.data.isSelect = true
					this.data.editFlag = true
					this.data.oldVal = JSON.parse(JSON.stringify(this.data.name))
				}
				this.$forceUpdate()
			},
			//取消编辑
			cancelEdit() {
				//添加数据则删除
				if (!this.data.oldVal) {
					this.nodeDelete()
					this.$forceUpdate()
					return
				}
				//实体数据则取消
				if (this.data.oldVal) {
					this.data.name = JSON.parse(JSON.stringify(this.data.oldVal))
					delete this.data.isSelect
					delete this.data.editFlag
					delete this.data.oldVal
					this.$forceUpdate()
					return
				}
			},
			//添加同级
			addSameLevel () {
				if (document.querySelector('.ipt-only')) {
					hl.toast(this.tips)
					return
				}

				if (Array.isArray(this.$parent.data)) {
					this.$parent.data.push({ name: '', oldVal: '', isSelect: true, editFlag: true, children: []})
				} else {
					this.$parent.data.children.push({ name: '', oldVal: '', isSelect: true, editFlag: true, children: []})
				}
			},
			//添加一个
			addLower () {
				if (document.querySelector('.ipt-only')) {
					hl.toast(this.tips)
					return
				}
				if (!this.data.children) {
					Vue.set(this.data, 'children', [])
				}
				this.data.children.push({ name: '', oldVal: '', isSelect: true, editFlag: true, children: []})
				this.open = true;
			},
			//添加一个
			add () {
				if (this.samelevel) return;
				if (document.querySelector('.ipt-only')) {
					hl.toast(this.tips)
					return
				}
				if (!this.data.children) {
					Vue.set(this.data, 'children', [])
				}
				this.data.children.push({ name: '', oldVal: '', isSelect: true, editFlag: true, children: []})
				this.open = true;
			},
			//保存/新增
			saveOrAdd () {
				delete this.data.isSelect
				delete this.data.editFlag
				delete this.data.oldVal
				this.$forceUpdate()
			},
			//确认添加或编辑
			query () {
				if (this.data.oldVal) {
					this.$emit('on-edit-click', {data: this.data, parentData: this.$parent.data, save: this.saveOrAdd})
					return
				}
				if (!this.data.oldVal) {
					this.$emit('on-add-click', {data: this.data, parentData: this.$parent.data, save: this.saveOrAdd})
					return
				}
			}
		},
		mounted() {
			this.$nextTick(function() {
				this.computedPleft();
				this.$forceUpdate()
			});
			if (!this.list[this.list.length-1]['name']) {
				this.list[this.list.length-1]['isSelect'] = true
				this.list[this.list.length-1]['editFlag'] = true
			}
		}
	}

	// 查找上级指定父级
	function getParentTag(startTag, parents, parentTagList = []) {
		// 传入标签是否是DOM对象
		if (!(startTag instanceof HTMLElement)) return console.error('receive only HTMLElement');
		// 父级标签是否是body,是着停止返回集合,反之继续
		if ('BODY' !== startTag.parentElement.nodeName) {
			if (startTag.parentElement.className.indexOf(parents) > -1) {
				// 放入集合
				parentTagList.push(startTag.parentElement)
			}
			// 再上一层寻找
			return getParentTag(startTag.parentElement, parents, parentTagList)
		}
		// 返回集合,结束
		else {
			return parentTagList;
		}
	}


	Vue.component('hl-infinite-tree', hlInfiniteTree)
}())
